<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../../plugins/bootstrap-5.1.3-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <script src="../../../plugins/bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js" ></script>
    <script src="../js/blog/blog.js"></script>
    <script src="../../../plugins/js/request.js"></script>
    <script src="../js/blog/api.js"></script>
    <title>Document</title>
    <style>

    </style>
</head>
<body>

    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg opacity-75  " >
        <div class="container-sm  ">
          <a class="navbar-brand text-lg" href="#">Blog</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse " id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item a">
                      <a class="nav-link active "  aria-current="page" href="blogs.html">  <i class="bi bi-house-door"></i> 博客</a>
                  </li>
                  <li class="nav-item a">
                      <a class="nav-link" href="type.html"><i class="bi bi-lightbulb"></i>分类</a>
                  </li>

                  <li class="nav-item a">
                      <a class="nav-link " href="tags.html"> <i class="bi bi-bookmarks"></i>标签</a>
                  </li>
              </ul>
           <div class="m-magen-tiny a " >
             <a href="#" style="text-decoration:none;" class="denglu-pp">
               
                <img src="../image/2003390.jpg" class="rounded-circle " style="max-width: 50px !important;" alt="...">
                <span class="" >45</span>
             </a>
           
           </div>
          </div>
        </div>
      </nav>

      <!-- 中间内容 -->
    <div class="m-container-small con-padding-top" id="Blog">

      <div class="f-bg search-pp rounded  " >
      <div class="row">
        <div class="col-3">
          <div class="col-auto denglu-pp">
            <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
          </div>
        </div>
        <div class="col-3">
          <select class="form-select search-ppp" aria-label="Default select example">
            <option selected>Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
          </select>
        </div>
        <div class="col-6">
          <button type="button" class="btn btn-secondary search-ppp">clear</button>
          <button type="button" class="btn btn-success search-ppp">搜索</button>
        </div>
      </div>
      </div>
      <!-- 表格 -->
      <div >
        <table class="table f-bg h-padding-b rounded-top">
          
          <thead>
            <tr>
              <th scope="col"></th>
              <th scope="col">标题</th>
              <th scope="col">类型</th>
              <th scope="col">推荐</th>
              <th scope="col">状态</th>
              <th scope="col">更新时间</th>
              <th scope="col">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in blog" >
              <th scope="row" >{{index+1}}</th>
                <td style="display: none" >{{item.id}}</td>
              <td >{{item.title}}</td>
              <td>{{item.type}}</td>
              <td>{{item.recommend == true ? '推荐' : '正常'}}</td>
              <td>{{item.published == true ? '发布' : '草稿'}}</td>
              <td>{{item.updateTime}}</td>
              <td>
                <button type="button" class="btn btn-success btn-sm1" @click="edit(item.id)">编辑</button>
                <button type="button" class="btn btn-danger btn-sm1"  @click="del(item.id)">删除</button>
              </td>
            </tr>
          </tbody>
          
        </table>
        <div class="f-bg rounded-bottom">
          <div class="row">
            <div class="col-6">
              <nav aria-label="Page navigation example ">
                <ul class="pagination h-padding-b m-padding-sm ">
                  <li class="page-item ">
                    <a class="page-link" href="#" aria-label="Previous" @click="handleCurrentChange(page-1)">
                      <span aria-hidden="true">上一页</span>
                    </a>
                  </li>
                
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next" @click="handleCurrentChange(page+1)">
                      <span aria-hidden="true">下一页</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
            <div class="col-6 text-end">
                <button type="button" class="btn btn-success  m-padding-sm " @click="add">新增</button>
            </div>
          </div>
         
        </div>
      </div>
      <!-- 提示信息 -->
      <div class="alert alert-success message-top" role="alert">
        A simple success alert—check it out!
      </div>
    </div>
    
    <br><br><br><br><br><br><br>
    <div class="container-fluid f-bg sticky-bottom " style="padding-top: 40px;">
      <div class="row clearfix">
          <div class="col-md-12 column">
              <div class="jumbotron">
                  <div class="container">
                      <center>
  
                          <p>Copyright© 2020 All Rights Reserved. </p>
                          <p>试做</p>
                          地址：航空港校区（主校区） &nbsp;&nbsp;&nbsp; 电话:8956584
                          
                      </center>
  
                  </div>
              </div>
          </div>
      </div>
  </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script>

       new Vue({
           el:"#Blog",
           data() {
               return {
                   page: 1,
                   pageSize: 5,
                   blog:[],


               }
           },
           created(){
               this.init()
           },
           methods:{
               //aixos 会返回一个Promise对象
               //async 和 await 基于 promise 的。
               //   使用 async 的函数将会始终返回一个 promise 对象
               //   await 关键字只能放到async 函数里面
               async init() {
                   const params = {
                       page: this.page,
                       pageSize: this.pageSize,

                   }
                    console.log(params)
                   await getBlog(params).then(res => {
                       if (String(res.data.code) === '1') {
                           this.blog =res.data.data.records
                           console.log(this.blog)
                       }
                   }).catch(err => {
                       alert("cuowu")
                   })
               },
               handleSizeChange(val) {
                   this.pageSize = val
                   console.log(this.pageSize)
                   this.init()
               },
               handleCurrentChange(val) {
                   this.page = val
                   this.init()
               },
                add(){
                    window.location.href="../pages/blogs-input.html"
                },
              edit(id){
                  window.location.href="/templates/backed/pages/blogs-input.html?id="+id
              },
              async  del(id){
                  await   deleteBlog(id).then(res => {
                          if (String(res.data.code) === '1') {
                              window.location.reload()
                          }
                      }).catch(err => {
                          alert("cuowu")
                      })
                  },
              }

       })



   </script>
</body>
</html>